<template>
<div>
	<cont-header></cont-header>
	<daohang></daohang>
		<!--轮播图-->
		<a href="#/ShiXiangQing">
	<div class="mei-dtu">
		<a>
		<img class="mei-img mei-active" src="../assets/img/shouye/meishi/mei1.png" alt=""/>
		<img class="mei-img" src="../assets/img/shouye/muying/mu3.png" alt=""/>
		<img class="mei-img" src="../assets/img/shouye/muying/mu1.png" alt=""/>
		<img class="mei-img" src="../assets/img/shouye/tuijian/lunbo.png" alt=""/>
		<img class="mei-img" src="../assets/img/shouye/tuijian/t.png" alt=""/>
		</a>
		<div class="mei-fen">
			<span class="mei-span mspan"></span>
			<span class="mspan"></span>
			<span class="mspan"></span>
			<span class="mspan"></span>
			<span class="mspan"></span>
		</div>
	</div>
	</a>
	<!--热销类目-->
	<div class="renxiao">
		<!--热销标题-->
		<div class="renbiao">
			<span class="renbiao-left"></span> 热销商品
			<span class="renbiao-right"></span>
		</div>
		<!--热销商品-->
		<div class="renshopping">
			<!--糖果-->
			<div class="shione">
				<img src="../assets/img/shouye/meishi/mei5.png" alt=""/>
				<p class="shijie">糖果</p>
			</div>
			<!--膨化-->
			<a href="#/ShiXiangQing"><div class="shione">
				<img src="../assets/img/shouye/meishi/mei2.png" alt=""/>
				<p class="shijie">膨化</p>
			</div></a>
			<!--方便面-->
			<a href="#/ShiXiangQing"><div class="shione">
				<img src="../assets/img/shouye/meishi/mei3.png" alt=""/>
				<p class="shijie">方便面</p>
			</div></a>
			<!--巧克力-->
			<a href="#/ShiXiangQing"><div class="shione">
				<img src="../assets/img/shouye/meishi/mei4.png" alt=""/>
				<p class="shijie">巧克力</p>
			</div></a>
		</div>
	</div>
	<!--爆品推荐-->
	<div class="bao-baoping">
		<!--标题-->
		<div class="bao-renbiao">
			<span class="renbiao-left"></span> 爆品推荐
			<span class="renbiao-right"></span>
		</div>
		<!--爆品商品-->
		<div class="bao-shang">
		<div class="bao-reping">
			<div v-for="item in 3" class="bao-danshang">
				<img src="../assets/img/shouye/meishi/mei6.png" alt=""/>
				<p class="bao-p1">会呼吸丝滑蜜粉</p>
				<p class="bao-p2">
					<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
					<span>热品</span>
				</p>
				<p class="bao-p3">￥198</p>
			</div>
		</div>
		<!--右-->
		<div class="bao-reping">
			<div v-for="item in 3" class="bao-danshang2">
				<img src="../assets/img/shouye/meishi/mei7.png" alt=""/>
				<p class="bao-rp1">原味坚果</p>
				<p class="bao-rp2">
					<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
					<span>热品</span>
				</p>
				<p class="bao-rp3">￥198</p>
			</div>
		</div> 
		</div>
		<!--底-->
	</div>
	<p class="bao-dddi">亲，就这么多了</p>
	<!---->
	<cont-footer></cont-footer>
</div>
</template>

<script>
	export default {
		methods: {
			mlun:function(){
				var mund = 0;
				setInterval(function(){
					$(".mei-img").eq(mund).fadeIn(2000).siblings(".mei-img").fadeOut(2000);
					$(".mspan").eq(mund).addClass("mei-span").siblings(".mspan").removeClass("mei-span");
					mund++;
					if (mund == 5) {
						mund = 0;
					}
				},4000);
			}
		},
		mounted:function(){
			this.mlun();
		},
		components: {
			ContHeader,
			ContFooter,
			daohang
		}
	}
	//引入组件
	import ContHeader from '@/components/ContHeader' 
	import ContFooter from '@/components/ContFooter'
	import daohang from '@/components/daohang'
</script>
<style>
	/*轮播图*/
	.mei-dtu{
		width: 100%;
		height: 30rem;
		border: 0.1rem solid #FFFFFF;
		text-align: center;
		position: relative;
	}
	.mei-dtu>a{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.mei-img{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		display: none;
	}
	.mei-active{
		display: block;
	}
	/*分页器*/
	.mei-fen{
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		position: absolute;
		bottom: 0;
	}
	.mei-fen>span{
		display: inline-block;
		width:0.8rem;
		height: 0.8rem;
		border:0.2rem solid #FFFFFF;
		border-radius: 50%;
		background:#808080;
		margin-right:1rem;
	}
	.mei-fen .mei-span{
		background: #e53e42;
	}
	/*热销*/
	.renxiao{
		margin:2rem 0;
		width: 100%;
		height: 36rem;
		background: #ffffff;
		border: 0.1rem solid #FFFFFF;
		box-sizing: border-box;
	}
	.renbiao {
		width: 27.3rem;
		font-size: 2.9rem;
		height: 6.3rem;
		line-height: 6.3rem;
		margin: 1rem auto 0;
	}
	.bao-renbiao {
		width: 27.3rem;
		font-size: 2.9rem;
		height: 6.3rem;
		line-height: 6.3rem;
		margin: 1rem auto 0;
	}
	.renbiao-left,
	.renbiao-right {
		display: inline-block;
		width: 6rem;
		height: 0.1rem;
		background: #808080;
		margin-bottom: 0.9rem;
	}
	/*热销商品内容*/
	.bao-shang{
		display: flex;
		justify-content: space-around;
		width: 100%;
	}
	.renshopping{
		width: 100%;
		height: 30rem;
	}
	.shione{
		width: 15rem;
		float:left;
		text-align: center;
		margin-left:2.3rem;
		margin-top: 5rem;
	}
	.shione>img{
		width: 12rem;
		height: 12rem;
	}
	.shijie{
		font-size: 2.4rem;
		margin-top: 4rem;
	}
	/*爆品推荐*/
	.bao-baoping{
		width: 100%;
		height: 100rem;
		background: #ffffff;
		border: 0.1rem solid #FFFFFF;
		box-sizing: border-box;
	}
	.bao-danshang {
		width: 33rem;
		height: 28rem;
		border: 0.01rem solid grey;
		margin:2rem;
		position: relative;
	}
	
	.bao-danshang>img {
		width: 14.1rem;
		height: 14.1rem;
		position: absolute;
		left: 9rem;
		top:3rem;
	}
	.bao-p1 {
		font-size: 2.4rem;
		position: absolute;
		left: 8rem;
		bottom: 4.3rem;
	}
	
	.bao-p2>img {
		width: 4rem;
		height: 7.6rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.bao-p2>span {
		display: inline-block;
		width: 2.4rem;
		font-size: 2.4rem;
		position: absolute;
		left: 1rem;
		color: #FFFFFF;
	}
	.bao-p3{
		height: 2rem;
		font-size: 2.4rem;;
		position: absolute;
		right:14.1rem;
		bottom:1.4rem;
		color:red;
	}
	/*右*/
	.bao-danshang2 {
		width: 33rem;
		height: 28rem;
		border: 0.01rem solid grey;
		position: relative;
		margin:2rem 2rem 0 0;
	}
	
	.bao-danshang2>img {
		width: 22.2rem;
		height: 12.7rem;
		position: absolute;
		left: 6rem;
		top:4.4rem;
	}
	.bao-rp1 {
		font-size: 2.4rem;
		position: absolute;
		left:11.6rem;
		bottom: 4.3rem;
	}
	
	.bao-rp2>img {
		width: 4rem;
		height: 7.6rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.bao-rp2>span {
		display: inline-block;
		width: 2.4rem;
		font-size: 2.4rem;
		position: absolute;
		left: 1rem;
		color: #FFFFFF;
	}
	.bao-rp3{
		height: 2rem;
		font-size: 2.4rem;;
		position: absolute;
		right:14.1rem;
		bottom:1.4rem;
		color:red;
	}
	/*底*/
	.bao-dddi{
		width: 100%;
		height: 4rem;
		background: #f2f2f2;
		margin-bottom: 9.6rem;
		font-size: 1.8rem;
		color:#808080;
		text-align: center;
		line-height: 4rem;
	}
</style>